import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Card, Row,  } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import GapBlock from '@/components/GapBlock'
import {
  getVersions,
} from '@/services/setting/manage'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))

const App = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])

  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await getVersions()
    setData(res.data)
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  return (
    <PageHeaderWrapper>
      {/* <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} /> */}
      <RenderButtom click={handleBtn} />
      <Card title="手机app" bordered={false}>
        <Row type="flex" justify="space-around" align="middle">
          <Col>
            <div>当前版本</div>
            <div style={{fontWeight: 700}}>{data.appVersion}</div>
          </Col>
          <Col>
            <span style={{color: '#aaa'}}>下载地址：</span>
            <span>{`${data.appUpdateUrl}`}</span>
          </Col>
          <Col>
            <Button type='primary'>更新版本</Button>
          </Col>
        </Row>
      </Card>
      <GapBlock />
      <Card title="触摸大屏app" bordered={false}>
        <Row type="flex" justify="space-around" align="middle">
          <Col>
            <div>当前版本</div>
            <div style={{fontWeight: 700}}>{data.padVersion}</div>
          </Col>
          <Col>
            <span style={{color: '#aaa'}}>下载地址：</span>
            <span>{`${data.padUpdateUrl}`}</span>
          </Col>
          <Col>
            <Button type='primary'>更新版本</Button>
          </Col>
        </Row>
      </Card>
    </PageHeaderWrapper>
    )
}

export default Form.create()(App)
